<!--<template>
  <div class="cate">
    <Button @click="handleRender">添加分类</Button>
    

    <Button @click="clickdel" :style="{'background':'#ed3f14','color':'#fff'}">删除分类</Button>
    <Modal v-model="modal2" width="360">
        <p slot="header" style="color:#f60;text-align:center">
            <Icon type="information-circled"></Icon>
            <span>删除警告</span>
        </p>
        <div style="text-align:center">
            <p>数据将被永久删除,无法找回</p>
            <p>确定删除吗?</p>
        </div>
        <div slot="footer">
            <Button type="error" size="large" long :loading="modal_loading" @click="del">确定</Button>
        </div>
    </Modal>



    <Tree :data="treeMenu" :style="{'color':'red'}" @on-select-change="onSelectChange"></Tree>
  </div>
</template>

<script>

export default {
  data(){
    return {
      treeMenu:[{title:'用户管理',children:[]},{title:'新闻管理',children:[]},{title:'产品管理',children:[]},{title:'相册管理',children:[]}],
      addData:[],
      addval:'',
      addtype:0,

       modal2: false,
       modal_loading: false,
    }
  },
  created(){
    this.getData();
  },
  methods: {
          clickdel(){
                this.addData[0]['_id'] ? this.modal2 = !this.modal2 : this.warning(true);
          },
          warning (nodesc){
            this.$Notice.warning({
                title: 'Notification title',
                desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
                });
            },
           del () {
             fetch(`http://localhost:3000/cate/list/${this.addData[0]['_id']}`,{
                    method:'delete',
                    headers:{'Content-Type':'application/json'},
                  })
                  .then( res => {
                    return res.json();
                  })
                  .then( data => {
                    console.log(data);
                      /** */
                  });
                this.modal_loading = true;
                setTimeout(() => {
                    this.modal_loading = false;
                    this.modal2 = false;
                    this.$Message.success('删除成功');
                }, 1000);
            },
    getData(){
        fetch('http://localhost:3000/cate/list').then(res => {
        return res.json();
      }).then(data => {
        for(var i=0;i<data.length;i++){
            this.treeMenu[data[i].type]["children"].push(data[i]);
        }
        return this.treeMenu;
      });
    },
      handleRender () {
          if(this.addData[0]){
              this.$Modal.confirm({
                render: (h) => {
                    return h('Input', {
                        props: {
                            value: this.addval,
                            autofocus: true,
                            placeholder: 'Please enter your name...'
                        },
                        on: {
                                input: (val) => {
                                    this.addval = val;
                                }
                            }
                        })
                },
                onOk: () => {
                  if(!this.addData[0]['_id']){
                    if(!this.addData[0]['nodeKey']){//用户
                        fetch('http://localhost:3000/users/data',{
                          method:'post',
                          headers:{'Content-Type':'application/json'},
                          body:JSON.stringify({
                              name:this.addval
                            })
                        })
                        .then(res => {
                          res.json();
                        })
                        .then(data => {
                          console.log(data);
                        })
                    }else{
                        switch(this.addData[0].children[0]['type']){
                            case 1:this.addtype = 1;break;
                            case 2:this.addtype = 2;break;
                            case 3:this.addtype = 3;break;
                          }
                          fetch('http://localhost:3000/cate/data',{
                            method:'post',
                            headers:{'Content-Type':'application/json'},
                            body:JSON.stringify({
                              type:this.addtype,
                              title:this.addval
                            })
                          })
                          .then( res => {
                            return res.json();
                          })
                          .then( data => {
                            /**刷新页面 */
                          });
                    }
                    
                  }
                    if(this.addData[0]['_id']){
                      switch(this.addData[0]['type']){
                        case 1:this.addtype = 1;break;
                        case 2:this.addtype = 2;break;
                        case 3:this.addtype = 3;break;
                      }
                        fetch('http://localhost:3000/cate/data',{
                            method:'post',
                            headers:{'Content-Type':'application/json'},
                            body:JSON.stringify({
                              type:this.addtype,
                              title:this.addval,
                              parentId:this.addData[0]._id
                            })
                          })
                          .then( res => {
                            return res.json();
                          })
                          .then( data => {
                            console.log(data);
                             /* 刷新页面 */
                          });
                    }
                    this.$Message.info('添加分类成功');
                }
            })
          }else{
            this.$Modal.confirm({
                title: '提示',
                content: '<p>当前没有选择分类</p>',
                
            });
          }
      },
      onSelectChange(data){
        this.addData = data;
           if(this.addData[0]){
              if(!this.addData[0]['nodeKey']){
                fetch('http://localhost:3000/users/list',{
                  method:'post',
                  headers:{'Content-Type':'application/json'}
                })
                .then( res => {
                  return res.json();
                })
                .then( data => {
                  console.log(data)
                })
                
              }
          }
      }
  }
}
</script>

<style>
.cate .ivu-tree-children{
    float:left;
    width:25%;
    text-align:center;
    font-size:40px
  }
.cate .ivu-tree-children .ivu-tree-children{
    float:none;
    width:100%;
    font-size:25px;
  }
.cate .ivu-tree ul{
    font-size:30px;
  }
</style>-->


<template>
    <div class="cate">
      <Modal v-model="modal2" width="360">
        <p slot="header" style="color:#f60;text-align:center">
            <Icon type="information-circled"></Icon>
            <span>删除警告</span>
        </p>
        <div style="text-align:center">
            <p>数据将被永久删除,无法找回</p>
            <p>确定删除吗?</p>
        </div>
        <div slot="footer">
            <Button type="error" size="large" long :loading="modal_loading" @click="del">确定</Button>
        </div>
    </Modal>
        <Tabs value="users" @on-click="newsData">
        <TabPane label="用户管理" name="users">
          <Button type="primary"  @click="modalAdd = true">添加</Button>
        <Button type="error"  @click="removes">删除选中</Button>
        <Input placeholder="请输入要搜索的用户名" style="width: 300px" @input="inputData" v-model="name"></Input>
        <Modal
            v-model="modalAdd"
            title="添加"
            :loading="loading"
>   <!--            @on-ok="asyncOK"-->
            <Form ref="formInline" :model="formInline" :rules="ruleInline" block>
                <FormItem prop="name">
                    <Input type="text" v-model="formInline.name" placeholder="Username">
                        <Icon type="ios-person-outline" slot="prepend"></Icon>
                    </Input>
                </FormItem>
                <FormItem prop="email">
                    <Input type="text" v-model="formInline.email" placeholder="Email">
                        <Icon type="email" slot="prepend"></Icon>
                    </Input>
                </FormItem>
                <FormItem prop="password">
                    <Input type="password" v-model="formInline.password" placeholder="Password">
                        <Icon type="ios-locked-outline" slot="prepend"></Icon>
                    </Input>
                </FormItem>
            </Form>
        </Modal>
          <Table border ref="selection" :columns="columns" :data="data" height='280' @on-selection-change="onSelectionChangeHandler" @on-select-cancel="onSelectCancelHandler"></Table>
          <Page :total="filter.total" show-sizer :page-size-opts="filter.pagesize" :page-size="filter.limit" @on-change="onChangeHandler" @on-page-size-change="onPageSizeChangeHandler"></Page>
        </TabPane>

        <TabPane label="新闻管理" name="news">
          <Button @click="handleRender" :style="{'background-color':'#2d8cf0','color':'#fff'}">添加分类</Button>
    

    <Button @click="clickdel" :disabled="disabledBool" :style="{'background':'#ed3f14','color':'#fff'}">删除分类</Button>
           <Tree :data="treeMenu" :style="{'color':'red'}" @on-select-change="onSelectChange"></Tree>
        </TabPane>
        <TabPane label="产品管理" name="product">
          <Button @click="handleRender" :style="{'background-color':'#2d8cf0','color':'#fff'}">添加分类</Button>
    

    <Button @click="clickdel" :disabled="disabledBool" :style="{'background':'#ed3f14','color':'#fff'}">删除分类</Button>
    <Tree :data="treeMenu" :style="{'color':'red'}" @on-select-change="onSelectChange"></Tree>
    </TabPane>
        <TabPane label="相册管理" name="album">
          <Button @click="handleRender" :style="{'background-color':'#2d8cf0','color':'#fff'}">添加分类</Button>
    

    <Button @click="clickdel" :disabled="disabledBool" :style="{'background':'#ed3f14','color':'#fff'}">删除分类</Button>
    </TabPane>
    </Tabs>
    </div>
</template>


<script>
import { base} from '../common/base';
export default {
   mixins:[base],
    data () {
            return {
                nameName:'',
                treeMenu:[],//渲染的数据
                classifyType:0,//分类的type值
                SelectChangeName:null,
                addval:'',
                disabledBool:true,

                modal2: false,
                modal_loading: false,
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '用户名',
                        key: 'name',
                        width: 200,
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    }
                    
                ],
                formInline: {
                    name: '',
                    password: ''
                },
                ruleInline: {
                    name: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { type: 'string', min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
                    ],
                   email: [
                        { required: true, message: '请输入邮箱', trigger: 'blur' },
                        { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
                    ]
                }
            }
        },
        methods:{
          clickdel(){
            this.SelectChangeName  ? this.modal2 = !this.modal2 : this.warning(true);
          },
          warning (nodesc){
            this.$Notice.warning({
                title: 'Notification title',
                desc: 'Here is the notification description. Here is the notification description. '
                });
            },
           del () {
             fetch(`http://localhost:3000/cate/list/${this.SelectChangeName._id}`,{
                    method:'delete',
                    headers:{'Content-Type':'application/json'},
                  })
                  .then( res => {
                    return res.json();
                  })
                  .then( data => {
                    this.newsData(this.nameName);
                  });
                this.modal_loading = true;
                setTimeout(() => {
                    this.modal_loading = false;
                    this.modal2 = false;
                    this.$Message.success('删除成功');
                }, 1000);
            },
            inputData(){
                fetch(`http://localhost:3000/${this.modules}/list`,{
                    method:'post',
                    headers:{
                        'Content-Type':'application/json'
                    },
                    body:JSON.stringify({
                        name:this.name,
                    })
                })
                .then((res) => {
                    return res.json();
                })
                .then((data) => {
                    this.filter.total = data.total;
                    this.data = data.rows;
                });
            },
            onSelectChange(data){
              this.SelectChangeName = data[0];
            },
            handleRender(){
              this.$Modal.confirm({
                  render: (h) => {
                    return h('Input', {
                        props: {
                            value: this.addval,
                            autofocus: true,
                            placeholder: 'Please enter your name...'
                        },
                        on:{
                            input: (val) => {
                                this.addval = val;
                            }
                        }
                    })
                  },
                  onOk:() => {
                      fetch(`http://localhost:3000/cate/data`,{
                        method:'post',
                        headers:{'Content-Type':'application/json'},
                        body:JSON.stringify({
                            title:this.addval,
                            type:this.classifyType,
                            parentId:this.SelectChangeName
                        })
                      })
                      .then( res => {
                        return res.json();
                      })
                      .then( data => {
                        this.newsData(this.nameName);
                        this.SelectChangeName = null;
                      })
                  }
              })
              
            },
            newsData(name){
              this.nameName = name;
                if(name!=='users'){
                  switch(name){
                    case 'news':this.classifyType = 1;break;
                    case 'product':this.classifyType = 2;break;
                    case 'album':this.classifyType = 3;break;
                  }
                  fetch(`http://localhost:3000/cate/list/${this.classifyType}`)
                    .then( res => {
                      return res.json();
                    })
                    .then( data => {
                      this.treeMenu = data;
                    })
                }
            },
        },
        watch:{
            'SelectChangeName'(newval,oldval){
              this.disabledBool = false;
            }
        },
        created(){
            this.getData();
        },
    }
</script>

<style>
.cate .ivu-tree-children{
    float:left;
    margin-left:20px;
    text-align:center;
    font-size:40px
  }
.cate .ivu-tree-children .ivu-tree-children{
    float:none;
    width:100%;
    text-align:left;
    font-size:25px;
  }
.cate .ivu-tree ul{
    font-size:30px;
  }
</style>